<script setup>
import { reactive } from 'vue'

const user = reactive({
  username:"",
  agree: false,
  hobby: [],
  sex:"",
  degree: "",
  course:[]
})
</script>

<template>
  <div style="display: flex;">
    <div style="border: 1px solid red;width: 300px">
      <form>
        <h1>表单绑定</h1>
        <p style="background-color: azure">
          <label>姓名(文本框)：</label>
          <input v-model="user.username"/></p>
        <p style="background-color: azure">
          <label>同意协议(checkbox)：</label>
          <input v-model="user.agree" type="checkbox"/>
        </p>
        <p style="background-color: azure">
          <label>兴趣(多选框)：</label><br/>
          <label><input v-model="user.hobby" type="checkbox" value="足球"/>足球</label>
          <label><input v-model="user.hobby" type="checkbox" value="篮球"/>篮球</label>
          <label><input v-model="user.hobby" type="checkbox" value="羽毛球"/>羽毛球</label>
          <label><input v-model="user.hobby" type="checkbox" value="乒乓球"/>乒乓球</label>
        </p>
        <p style="background-color: azure">
          <label>性别(单选框)：</label>
          <label><input v-model="user.sex" type="radio" name="sex" value="男">男</label>
          <label><input v-model="user.sex" type="radio" name="sex" value="女">女</label>
        </p>
        <p style="background-color: azure">
          <label>学历(单选下拉列表)：</label>
          <select v-model="user.degree">
            <option disabled value="">选择学历</option>
            <option>小学</option>
            <option>初中</option>
            <option>高中</option>
          </select>
        </p>
        <p style="background-color: azure">
          <label>课程(多选下拉列表)：</label>
          <br/>
          <select multiple v-model="user.course">
            <option disabled value="">选择课程</option>
            <option>语文</option>
            <option>数学</option>
            <option>科学</option>
            <option>道法</option>
          </select>
        </p>
      </form>
    </div>
    <div style="border: 1px solid blue;width: 200px">
      <h1>结果预览</h1>
      <p style="background-color: azure"><label>姓名：{{user.username}}</label></p>
      <p style="background-color: azure"><label>同意协议：{{user.agree ? "同意" :"不同意"}}</label>
      </p>
      <p style="background-color: azure">
        <label>兴趣：
          <li v-for="item in user.hobby">
            {{item}}
          </li>
        </label>
      </p>
      <p style="background-color: azure">
        <label>性别：{{user.sex}} </label>
      </p>
      <p style="background-color: azure">
        <label>学历：{{user.degree}}</label>
      </p>
      <p style="background-color: azure">
        <label>课程：
          <li v-for="c in user.course">{{c}}</li>
        </label>
      </p>
    </div>
  </div>
</template>

<style scoped>

</style>